<template>
    <div class="detail_nav">
        <ul class="menu_list">
            <li>
                <a @click="scrollTo('personalInfo')" :class="{'active': activeModule === 'personalInfo'}" href="javascript:void(0);">{{$t('common.personalInfo')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
            </li>
            <li>
                <a @click="scrollTo('otherInfo')" :class="{'active': activeModule === 'otherInfo'}" href="javascript:void(0);">{{$t('common.materialInfo')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
            </li>
            <li><a @click="scrollTo('workStudent')" :class="{'active': activeModule === 'workStudent'}" href="javascript:void(0);">{{$t('common.workInformation')}}<i class="detail_menu_icon el-icon-caret-top"></i></a></li>
            <li>
                <a @click="scrollTo('contactsInfo')" :class="{'active': activeModule === 'contactsInfo'}" href="javascript:void(0);">{{$t('common.contactsInfo')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
            </li>
            <li>
                <a @click="scrollTo('loanHistory')" :class="{'active': activeModule === 'loanHistory'}" href="javascript:void(0);">{{$t('common.historicalInfo')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
            </li>
            <!--<li>-->
                <!--<a @click="scrollTo('modifyRecord')" :class="{'active': activeModule === 'modifyRecord'}" href="javascript:void(0);">{{$t('common.modifyRecord')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>-->
            <!--</li>-->
        </ul>
    </div>
</template>

<script>
    import storage from '@/libs/storage';

    let that = null;

    export default {
        name: 'detailMenu',
        props: {
            activeMenu: {
                required: true,
                type: String
            },
            userData: {
                type: Object
            },
        },
        watch: {
            activeMenu(newVal, oldVal) {
                this.activeModule = newVal;
            }
        },
        data() {
            return {
                userId: storage.get('userId'),
                activeModule: 'personalInfo',
                phone: '',
            };
        },
        methods: {
            scrollTo(module) {
                this.activeModule = module;
                this.$emit('click', module);
            }
        },
        filters: {
            switchType(type) {
                switch (+type) {
                    case 1:
                        return that.$t('audit.reception');
                    case 2:
                        return that.$t('audit.send');
                    case 3:
                        return that.$t('audit.notGet');
                    default:
                        return '';
                }
            }
        },
        created() {
            that = this;
        }
    };
</script>

<style lang="scss" scoped>
    @import "~@/assets/scss/function";

    .colorRed {
        color: #FF4949;
    }

    .el-table .red_color {
        color: #FF4949;
    }

    .detail_nav {
        margin: 0 0 8px;
        background-color: #fff;
        display: inline;
    }

    .keyword {
        width: 20%;
        display: inline-block;
    }

    .search {
        display: inline;
    }

    .setTitle {
        .el-dialog__header {
            background-color: #3A4954;
            padding: 10px 20px;
            color: #fff;
        }
        .row {
            padding-bottom: 20px;
        }
        .info {
            padding-left: 50px;
        }
        .line {
            border: 0px;
            width: 700px;
            height: 2px;
            margin-top: 10px;
            margin-bottom: 10px;
            padding: 0;
            background-color: #D5D5D5;
            overflow: hidden;
        }
    }

    .menu_list {
        width: 70%;
        display: inline;
        li {
            display: inline-block;
            a {
                display: block;
                padding: 0 6px;
                line-height: 44px;
                color: $colorText;
                height: 44px;
                position: relative;
                &.active {
                    background-color: $primary;
                    color: #fff;
                    .detail_menu_icon {
                        display: block;
                    }
                }
                .detail_menu_icon {
                    display: none;
                    position: absolute;
                    bottom: -7px;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 20px;
                    color: #f4f5f6;
                }
            }
        }
    }
</style>
